<template>
  <div>
    <!--  -->
    <el-form
      :inline="true"
      :model="form"
      @sumbit.native.prevent
      class="demo-form-inline"
    >
      <el-form-item label="电影名称">
        <el-input
          v-model="form.name"
          @keyup.native.enter="onSubmit"
          placeholder="请输入电影名称:模糊查询"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider content-position="left"> 电影列表 </el-divider>

    <!-- 表格 -->
    <el-table :data="moviesData.result">
      <el-table-column label="封面" width="100px">
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="80px" />
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" width="60px"></el-table-column>
      <el-table-column label="主演" prop="star_actor"></el-table-column>
      <el-table-column label="上映时间" prop="showingon" ></el-table-column>
      <el-table-column label="时长" width="50px">
        <template slot-scope="scope"> {{ scope.row.duration }}分钟 </template>
      </el-table-column>
      <el-table-column label="所属类别" prop="type" ></el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button type="primary" size="small"
            @click="$router.push(`/home/movie-update/${scope.row.id}`)"
            icon="el-icon-edit" circle></el-button>
          <el-button type="success" icon="el-icon-check" circle size="small"></el-button>
          <el-button type="warning" icon="el-icon-star-off" circle size="small"></el-button>
          <el-button type="danger"  icon="el-icon-delete" circle size="small"
            @click="delItem(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination background layout="->,prev, pager, next"
      :current-page="moviesData.page"
      :page-size="moviesData.pagesize"
      :total="moviesData.total"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
        keyword:'', // 分页查询时用来判断的
      form: {
        name: "",
      },
      moviesData: {
        page: 1,
        pagesize: 5,
        total: 0,
      },
    };
  },
  mounted() {
    let params = { page: 1, pagesize: this.moviesData.pagesize };
    this.$http.movieApi.queryAll(params).then((res) => {
      console.log("初始化电影列表", res);
      this.moviesData = res.data.data;
      console.log("moviesData数据", this.moviesData.result);
    });
  },
  methods: {
    // 点击按钮进行查询
    onSubmit() {
        this.keyword=this.form.name
        if(this.form.name.trim()){
            let params={
                name:this.form.name,
                page:1,
                pagesize:this.moviesData.pagesize
            }
            this.$http.movieApi.queryByNameLike(params).then(res=>{
                console.log('模糊查询结果',res);
                this.moviesData=res.data.data
            })
        }else{
            let params={page:1,pagesize:this.moviesData.pagesize}
            this.$http.movieApi.queryAll(params).then(res=>{
                console.log('初始化列表',res);
                this.moviesData=res.data.data
            })
        }
    },
    // 分页查询 -- 
    //  用户输入关键字且点击确定按钮 -- 查询结果是带着对应的页数的 ,点击分页器会继续查询当页的内容;
    //  用户不输入关键字的话就查询所有 ; 所以要判断是否输入关键字 : keyword
    pageChange(page) {
        console.log(page);
        if(this.keyword){
            let params={
                name:this.keyword,
                page:page,
                pagesize:this.moviesData.pagesize
            }
            this.$http.movieApi.queryByNameLike(params).then(res=>{
                console.log('模糊查询结果',res);
                this.moviesData=res.data.data
            })
        }else{
            let params={page,pagesize:this.moviesData.pagesize}
            this.$http.movieApi.queryAll(params).then(res=>{
                console.log('初始化列表',res);
                this.moviesData=res.data.data
            })
        }
    },
    delItem(id){
        console.log('待删除电影ID'+id);
        this.$confirm('该操作将永久删除电影,是否继续?','提示',{type:'warning'}).then(res=>{
            this.$http.movieApi.delete({id}).then(res=>{
                this.$message({type:'success',message:'删除成功'})
                if(this.keyword){
                    let params={
                        name:this.keyword,
                        page:this.moviesData.page,
                        pagesize:this.moviesData.pagesize
                    }
                    this.$http.movieApi.queryByNameLike(params).then(res=>{
                        console.log('模糊查询结果',res);
                        this.moviesData=res.data.data
                    })
                }else{
                    let params={page:this.moviesData.page,pagesize:this.moviesData.pagesize}
                    this.$http.movieApi.queryAll(params).then(res=>{
                        console.log('初始化列表',res);
                        this.moviesData=res.data.data
                    })
                }
            })
        })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>